<template>
<div class="nav">
  <div class="container">
    <div class="outlined" @click="setCollapsed">
      <MenuUnfoldOutlined v-if="collapsed"/>
      <MenuFoldOutlined v-else/>
    </div>

    <div class="user-info">
      <a-dropdown>
       <div @click.prevent class="user-name" v-if="userInfo">
         <a-avatar size="large" :src="userInfo.avatar||appLogoUrl">

         </a-avatar>
         {{userInfo.name}}
       </div>
        <div @click="router.push({name:'login'})" class="user-name" v-else>

          <a-button type="primary">登录</a-button>
        </div>

      <template #overlay v-if="userInfo">
        <a-menu>
          <a-menu-item @click="logOut">
           <div style="display: flex;align-items: center;justify-content: space-between">
             <PoweroffOutlined />
             <span>退出登录</span>
           </div>
          </a-menu-item>

        </a-menu>
      </template>
      </a-dropdown>
      </div>
  </div>
</div>
</template>
<script setup lang="ts">
import {useSystemStore} from '@/stroe'
import {MenuFoldOutlined, MenuUnfoldOutlined,PoweroffOutlined} from "@ant-design/icons-vue";
import {computed} from "vue";
import {UserInfo} from "@/types/global.ts";
import {useRouter} from "vue-router";
const systemStore = useSystemStore();
//@ts-ignore
const userInfo = computed<UserInfo>(()=>systemStore.userInfo);
const collapsed = computed(()=>systemStore.collapsed)
const router = useRouter();
const setCollapsed = ()=>{
  systemStore.setCollapse(!systemStore.collapsed)
}

const appLogoUrl = import.meta.env.VITE_APP_LOGO;
const logOut = ()=>{
  systemStore.logOut(router);
}
</script>
<style scoped lang="scss">
.nav{
  width: 100%;
  height: 100%;
  background: #fff;

  .container{
    .logo{
      width: 200px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 20px;
      font-weight: bold;
      border:none;
      //background-color: #949090;
      :deep( .ant-menu-item-disabled){
        color: #000 !important;
        cursor: default;
      }
      :deep(.ant-menu-item){
        display: flex;
        align-items: center;
        .ant-menu-item-icon{
          min-width: 24px;
          height: 24px;
        }
        //justify-content: center;
      }
    }
    padding: 0 30px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .collapsed{
      width: 200px;
      .trigger{
        font-size: 20px;
      }
    }
    .user-info{
      display: flex;
      cursor: pointer;
      .user-name{
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

}
.outlined{
  margin-left: 20px;
  cursor: pointer;
}
</style>
